<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <link rel="stylesheet" href="./css/global.css">
</head>

<body>
    <div id="app">

        <div>
            <h2>{{title}}</h2>
            <ul>
                <li v-for='msg in messages'>{{msg}}</li>
            </ul>
        </div>

        <div>
            <ul>
                <li v-if="isUser">
                    <label for="username">用户账号</label>
                    <input type="text" id="username" placeholder="用户账号" key="username">
                </li>
                <li v-else>
                    <label for="email">用户邮箱</label>
                    <input type="text" id="email" placeholder="用户邮箱" key="email">
                </li>
            </ul>
        </div>
        <button v-on:click='isUser=!isUser'>切换类型</button>

    </div>

    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                title: 'vue 案例：用户登录切换',
                messages: [
                    `input 在有输入内容的情况下，切换input 元素时会在新的input元素中保留已输入的内容`,
                    `这是因为vue 在进行dom渲染时，出于性能考虑，会尽可能的复用已存在的元素，而不是创建新的元素`,
                    `如果不需要类似复用的情况下，可以给对应的input 添加不同的key来解决此问题`,
                ],
                isUser: true,
            },
            computed: {

            },
            methods: {
                // action() {
                //     console.log(this.isUser);
                //     this.isUser = !this.isUser
                // }
            }
        });
    </script>
</body>

</html>